<template>
	<view class="category">
		
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
				<image :src="item.imgUrl" mode="heightFix"></image>

				<view class="itemMessage">
					<text class="messText">{{ item.text }}</text>
					<view class="messPrice">
						<text class="pricetext">￥{{ item.price }}</text>
						<image src="../../static/gwc2.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			
			goodsList: []
		};
	},
	created() {
		let that = this;
		this.$http({
			url: '/index/petFoodList',
			success(res) {
				that.goodsList = res.data;
			}
		});
		
	},

};
</script>

<style scoped>
.category{

	background-color: rgb(248, 248, 248);
	width: 100vw;
	height: 100vh;

}
.goods-item {
	height: 20vw;
	width: 100%;
	display: flex;
	padding:  0 30rpx;
	box-sizing: border-box;
	margin: 10rpx 0;
	background-color: #fff;
}
.goods-item image:nth-of-type(1) {
	height: 100%;
}
.goods-item .itemMessage{
	flex: 1;
display: flex;
justify-content: space-around;
flex-direction: column;
/* align-items: center; */
padding: 0 10rpx;
}
.goods-item .itemMessage .messText{
	font-size: 28rpx;
	font-weight: 200;
}
.messPrice{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.messPrice image{
	width: 40rpx;
}
.goods-item .itemMessage .pricetext{
	font-size: 28rpx;
	font-weight: 200;
	color:rgb(255, 149, 64) ;
}
</style>
